<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hope2</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="shortcut icon" href="/favicon.ico">
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/highstock.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.hcharts.cn/plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/drag-panes.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/indicators/indicators.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/indicators/ema.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/indicators/macd.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/indicators/pivot-points.js"></script>
    <script type="text/javascript">
        // var chart;
        var path = window.document.location.href;
        var code = path.split('?')[1].split('=')[1];
        var flagLink = '/demark-backtrack/' + code;
        // var flagLink = 'http://127.0.0.1:8003/demark-backtrack/' + code;
        $(document).ready(function () {
            checkWatch();
            post();
        });

        function watch() {
            var link = '/watchlist/add/' + code;
            if ($("#watch-icon").attr('class') == "fa fa-check-square") {
                return;
            }
            $.get(link, function (data) {
                checkWatch();
            });
        }

        function checkWatch() {
            var link = '/watchlist/status/' + code;
            $.getJSON(link, function (data) {
                if (data.watched) {
                    $("#watch-icon").removeClass("fa-heart").addClass("fa-check-square");
                }
            });
        }

        var profitOptions = {
            chart: {
                zoomType: null,
                // pinchType: null
            },
            rangeSelector: {
                selected: 5
            },
            title: {
                text: '定投收益率比较'
            },
            yAxis: {
                labels: {
                    formatter: function () {
                        return (this.value > 0 ? ' + ' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 3,
                    color: 'silver'
                }]
            },
            plotOptions: {
                series: {
                    // compare: 'percent',
                    showInNavigator: true,
                    animation: {
                        duration: 1500
                    }
                }
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>%<br/>',
                valueDecimals: 2,
                followTouchMove: false,
                split: true
            },

            series: [{
                type: 'line',
                name: "DeMark BS/BC 买入收益率",
                data: [],
                id: 'dataseries',
                color: '#f18b43',
                tooltip: {
                    valueDecimals: 2
                },
                threshold: null
            }, {
                type: 'line',
                name: "每日定投收益率",
                data: [],
                id: 'dataseries2',
                color: '#71984d',
                tooltip: {
                    valueDecimals: 2
                },

                threshold: null
            }, {
                type: 'line',
                name: "每周定投收益率",
                data: [],
                id: 'dataseries2',
                color: '#063f9b',
                tooltip: {
                    valueDecimals: 2
                },
                threshold: null
            }, {
                type: 'line',
                name: "每月定投收益率",
                data: [],
                id: 'dataseries2',
                color: '#020a16',
                tooltip: {
                    valueDecimals: 2
                },
                threshold: null
            }, {
                type: 'line',
                name: "DeMark BS 买入收益率",
                data: [],
                id: 'dataseries',
                color: '#ef330c',
                tooltip: {
                    valueDecimals: 2
                },
                threshold: null
            }]
        };


        var stockOptions = {
            rangeSelector: {
                selected: 4
            },
            title: {
                text: ''
            },
            yAxis:
                [{
                    title: {
                        text: '价格'
                    },
                    height: '100%',
                    resize: {
                        enabled: true
                    },
                    plotLines: [{
                        id: 'costPrice',
                        value: 0,
                        color: '#33AA11',
                        dashStyle: 'shortdash',
                        width: 2,
                        label: {
                            text: 'Demark'
                        }
                    }, {
                            id: 'averagePrice',
                            value: 0,
                            color: '#DD2200',
                            dashStyle: 'shortdash',
                            width: 2,
                            label: {
                                text: '平均定投'
                            }
                        }
                    ]
                },
                {
                    top: '75%',
                    height: '25%',
                    labels: {
                        align: 'right',
                        x: -3
                    },
                    offset: 0,
                    title: {
                        text: 'MACD'
                    }
                }
                ]
                ,
            plotOptions: {
                series:
                    {
                    states: {
                        hover: {
                            enabled: true
                        }
                    },
                    label: {
                        // connectorAllowed: true
                    },
                    animation: {
                        // duration: 10000
                    }
                }
            },
            tooltip: {
                split: false,
                shared: false,
                valueDecimals: 2
                // pointFormatter: function() {
                //     console.log(this);
                //     var o=this.series.name;
                //     return '你好'
                // }
            },

            series: [{
                type: 'candlestick',
                name: "stock name",
                color: 'green',
                lineColor: 'green',
                upColor: 'red',
                upLineColor: 'red',
                navigatorOptions: {
                    color: Highcharts.getOptions().colors[0]
                },
                data: [],
                keys: ['x', 'open', 'high', 'low','close','turnover','rise'],
                id: 'dataseries',
                tooltip: {
                    valueDecimals: 2,
                    pointFormat:'<span style="color:{point.color}">\u25cf</span> <b> {series.name}</b><br/>开盘: {point.open}<br/>最高: {point.high}<br/>最低: {point.low}<br/>收盘: {point.close}<br/>换手: {point.turnover}%<br/>涨幅: {point.rise}%<br/>',

                }
            },
                {
                    type: 'flags',
                    data: null,
                    onSeries: 'dataseries',
                    shape: 'circlepin',
                    width: 16,
                    color: '#e97b25',
                    fillColor: '#e97b25',
                    style: { // text style
                        color: 'white'
                    },
                    visible: $("#bsCheckbox").is(':checked')
                }, {
                    type: 'flags',
                    data: null,
                    onSeries: 'dataseries',
                    shape: 'circlepin',
                    width: 16,
                    color: '#ef270d',
                    fillColor: '#ef270d',
                    style: { // text style
                        color: 'white'
                    },
                    visible: $("#bcCheckbox").is(':checked')
                }, {
                    type: 'flags',
                    data: null,
                    onSeries: 'dataseries',
                    shape: 'squarepin',
                    width: 16,
                    color: '#0def73',
                    fillColor: '#0def73',
                    style: { // text style
                        color: 'white'
                    },
                    visible: $("#ssCheckbox").is(':checked')
                }, {
                    type: 'flags',
                    data: null,
                    onSeries: 'dataseries',
                    shape: 'squarepin',
                    width: 16,
                    color: '#0a8ff1',
                    fillColor: '#0a8ff1',
                    style: { // text style
                        color: 'white'
                    },
                    visible: $("#scCheckbox").is(':checked')
                }, {
                    type: 'macd',
                    yAxis: 1,
                    linkedTo: 'dataseries',
                    color: 'rgba(24,180,191,0.94)'
                },
                {
                    type:'line',
                    name:'ma5' ,
                    data: [],
                    color: "#000000",
                    yAxis: 0,
                    dataGrouping:[],
                    lineWidth: 1,
                },{
                    type:'line',
                    name:'ma10' ,
                    data: [],
                    color: "#f3e806",
                    yAxis: 0,
                    dataGrouping:[],
                    lineWidth: 1,
                },{
                    type:'line',
                    name:'ma30' ,
                    data: [],
                    color: "#38f503",
                    yAxis: 0,
                    dataGrouping:[],
                    lineWidth: 1,
                },
                {
                    type:'line',
                    name:'ma60' ,
                    data: [],
                    color: "#5258a2",
                    yAxis: 0,
                    dataGrouping:[],
                    lineWidth: 1,
                }]
        };

        function createProfitChart(data) {
            profitOptions.series[0].data = data.profit1.profits;
            profitOptions.series[1].data = data.profit2.profits;
            profitOptions.series[2].data = data.profit3.profits;
            profitOptions.series[3].data = data.profit4.profits;
            profitOptions.series[4].data = data.profit5.profits;
            // profitOptions.plotOptions.series.animation.duration=10000;
            profitChart = Highcharts.stockChart('profit-container', profitOptions);
            var v = profitOptions;
        }


        function post() {
            var days = $("#days").val();
            var rehabilitation = $('input:radio[name="rehabilitation"]:checked').val();
            var linkNew = flagLink + '?days2Now=' + days + '&rehabilitation=' + rehabilitation;
            getFlagsData(linkNew);
        }

        function createChart(data) {
            var setupFlag = [];
            var countdownFlag = [];
            if (data.flag != null) {
                for (var i = 0; i < data.flag.length; i++) {
                    //准备setup 数据
                    var setupObj = {};
                    setupObj.x = data.flag[i].setup;
                    setupObj.title = 'BS';
                    setupObj.text = '(' + data.flag[i].setupNumber + 'T,Setup) ' + data.flag[i].setupDate;
                    setupFlag.push(setupObj);
                    //准备countdown 数据
                    var countdownObj = {};
                    countdownObj.x = data.flag[i].countdown;
                    countdownObj.title = 'BC';
                    countdownObj.text = '(' + data.flag[i].countdownNumber + 'T,Countdown) ' + data.flag[i].countdownDate;
                    countdownFlag.push(countdownObj);
                }
            }
            var sellSetupFlag = [];
            var sellCountdownFlag = [];
            if (data.flagSell != null) {
                for (var i = 0; i < data.flagSell.length; i++) {
                    //准备setup 数据
                    var setupObj = {};
                    setupObj.x = data.flagSell[i].setup;
                    setupObj.title = 'SS';
                    setupObj.text = '(' + data.flagSell[i].setupNumber + 'T,Setup) ' + data.flagSell[i].setupDate;
                    sellSetupFlag.push(setupObj);
                    //准备countdown 数据
                    var countdownObj = {};
                    countdownObj.x = data.flagSell[i].countdown;
                    countdownObj.title = 'SC';
                    countdownObj.text = '(' + data.flagSell[i].countdownNumber + 'T,Countdown) ' + data.flagSell[i].countdownDate;
                    sellCountdownFlag.push(countdownObj);
                }
            }

            stockOptions.title.text = data.name + ' ' + data.code;

            //bars for rise percentage
            // {dateMilliSeconds, bar.getOpen(), bar.getHigh(), bar.getLow(), bar.getClose(),bar.getTurnoverRate()}
            var bars = data.bars;
            var dataLength = bars.length;
            for (i = 0; i < dataLength; i++) {
                if (i > 0) {
                    change = (bars[i][4] - bars[i - 1][4]) / bars[i - 1][4] * 100;
                } else {
                    change = 0;
                }
                bars[i][5]=Highcharts.numberFormat(bars[i][5],2);
                bars[i][6]=Highcharts.numberFormat(change,2);
            }
            //ma
            let ma = [];
            let maset = [5,10,30,60];
            for (i = 0; i < dataLength; i += 1) {
                for (let j = 0; j < maset.length; j++) {
                    let value = maset[j];
                    if(typeof ma['ma'+value] == "undefined"){
                        ma['ma'+value]=[];
                    }
                    if(typeof ma[value+'total'] == "undefined"){
                        ma[value+'total']=0;
                    }
                    if(i < value)
                    {
                        ma[value+'total'] += bars[i][4];
                        ma['ma'+value].push([bars[i][0],null]);
                    } else {
                        ma[value+'total'] += (bars[i][4] - bars[i - value][4]);
                        let kk = Number((ma[value+'total']/value).toFixed(2))
                        ma['ma'+value].push([bars[i][0], kk]);
                    }
                }
            }

            //bars data
            stockOptions.series[0].name = data.name;
            stockOptions.series[0].data = data.bars;

            //flags
            stockOptions.series[1].data = setupFlag;
            stockOptions.series[2].data = countdownFlag;
            stockOptions.series[3].data = sellSetupFlag;
            stockOptions.series[4].data = sellCountdownFlag;
            stockOptions.series[6].data = ma['ma5'];
            stockOptions.series[7].data = ma['ma10'];
            stockOptions.series[8].data = ma['ma30'];
            stockOptions.series[9].data = ma['ma60'];

            stockOptions.series[1].visible = $("#bsCheckbox").is(':checked');
            stockOptions.series[2].visible = $("#bcCheckbox").is(':checked');
            stockOptions.series[3].visible = $("#ssCheckbox").is(':checked');
            stockOptions.series[4].visible = $("#scCheckbox").is(':checked');
            stockOptions.series[6].visible = $("#maCheckbox").is(':checked');
            stockOptions.series[7].visible = $("#maCheckbox").is(':checked');
            stockOptions.series[8].visible = $("#maCheckbox").is(':checked');
            stockOptions.series[9].visible = $("#maCheckbox").is(':checked');

            //成本价格线
            if (data.profit1 != null) {
                stockOptions.yAxis[0].plotLines[0].value = data.profit1.averageCostPrice;
                stockOptions.yAxis[0].plotLines[0].label.text = "DeMark定投成本价格" + data.profit1.averageCostPrice.toFixed(2) + "元";
            }
            if (data.profit2 != null) {
                stockOptions.yAxis[0].plotLines[1].value = data.profit2.averageCostPrice;
                stockOptions.yAxis[0].plotLines[1].label.text = "平均定投成本价格" + data.profit2.averageCostPrice.toFixed(2) + "元";
            }

            // stockOptions.plotOptions.series.animation.duration=10000;
            chart = Highcharts.stockChart('container', stockOptions);
        }

        function getFlagsData(link) {
            Highcharts.getJSON(link, function (data) {
                createChart(data);
                createProfitChart(data);
            });
        }

        function checkboxOnclick(checkboxId, selected) {
            if (checkboxId == 'bsCheckbox') {
                chart.series[1].setVisible(selected);
            } else if (checkboxId == 'bcCheckbox') {
                chart.series[2].setVisible(selected);
            } else if (checkboxId == 'ssCheckbox') {
                chart.series[3].setVisible(selected);
            } else if (checkboxId == 'scCheckbox') {
                chart.series[4].setVisible(selected);
            }else if(checkboxId == 'maCheckbox'){
                chart.series[6].setVisible(selected);
                chart.series[7].setVisible(selected);
                chart.series[8].setVisible(selected);
                chart.series[9].setVisible(selected);
                // chart.series[10].setVisible(selected);
            }
        }
    </script>
</head>


<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png">  <h4
                    class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-3">
                <div class="field">
                    <label class="label">计算最近多少天的数据</label>
                    <div class="control">
                        <input id="days" class="input" type="text" name="days" value="300">
                    </div>
                </div>
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link" onclick="post()">Submit</button>
                    </div>
                </div>
            </div>
            <div class="column is-1">
            </div>
            <div class="column is-2">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="bsCheckbox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('bsCheckbox',this.checked)">
                                Buy-Setup 九天揽月
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="bcCheckbox" type="checkbox"
                                       onclick="checkboxOnclick('bcCheckbox',this.checked)">
                                Buy-Countdown 十三太保
                            </label>
                        </div>
                    </div>
                </div>

                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="ssCheckbox" type="checkbox"
                                       onclick="checkboxOnclick('ssCheckbox',this.checked)">
                                Sell-Setup 九九归天
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="scCheckbox" type="checkbox"
                                       onclick="checkboxOnclick('scCheckbox',this.checked)">
                                Sell-Countdown 十三惊魂
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="maCheckbox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('maCheckbox',this.checked)">
                                价格均线
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-1">
            </div>
            <div class="column is-2">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="radio">
                                <input type="radio" name="rehabilitation" value='non' onclick="post()" checked>
                                不复权
                            </label>
                            <label class="radio">
                                <input type="radio" name="rehabilitation" value='ea' onclick="post()">
                                前复权
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-1">
            </div>
            <div class="column is-1">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <button class="button is-danger is-inverted" onclick="watch()">
                                <span class="icon">
                                 <i id="watch-icon" class="fa fa-heart"></i>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<hr>
<section class="section">
    <div class="container">
        <div id="container" style="min-width:400px;height:600px"></div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div id="profit-container" style="min-width:400px;height:400px"></div>
    </div>
</section>

<hr>
</body>
</html>
